<template>
  <div>
    <div class="slider-menu">
      <div 
        v-for="(item,index) in menuList"
        :key="index"
        :class="menuIndex === index ? 'slider-menu-self active' : 'slider-menu-self'"
        @click="selMenu(item.title, index, item.name)"
      >
        <a-icon :type="item.icon" />
        <span v-if="!sliderColl">{{item.title}}</span>
      </div>
    </div>
    <!-- <a-menu
      :selectedKeys="selectedKeys"
      :openKeys="openKeys"
      mode="inline"
      :theme="theme"
      :inlineCollapsed="collapsed"
    >
      <template v-for="item in list">
        <a-menu-item 
          v-if="!item.children" 
          :key="item.path"
          @click="$route.push({path:item.key, query: $route.query})"
        >
          <a-icon type="pie-chart" />
          <span>{{item.title}}</span>
        </a-menu-item>
        <sub-menu v-else :menu-info="item" :key="item.path"/>
      </template>
    </a-menu> -->
  </div>
</template>

<script>
import { menuList } from '@/utils/menuList'
import { Bus } from '@/utils/bus'
export default {
  components: {

  },
  watch: {
    '$route': function(val){
      this.filterParent()
      // 高亮左侧菜单栏
      this.menuIndex = this.menuList.findIndex( item => item.name === val.name )
    },
  },
  props: {
    theme: {
      type: String,
      default: 'dark'
    },
    sliderColl: {
      type: Boolean,
      default: false
    }
  },
  data () {
    // const menuData = this.getMenuData(this.$router.options.routes);
    return {
      // collapsed: false,
      // menuData,
      // selectedKeys: this.selectedKeysMap[this.$route.path],
      // openKeys: this.collapsed ? [] : this.openKeysMap[this.$route.path],
      // 菜单父列表
      parentMenuList: [],
      mainMenu: '',
      // 菜单子列表/显示列表
      menuList: [],
      // 菜单下标/显示子菜单激活状态
      menuIndex: 0
    }
  },
  created() {
    // 默认显示首页菜单
    
  },
  mounted() {
    this.filterParent()
    this.menuIndex = this.menuList.findIndex( item => item.name === this.$route.name )
    // 动态点击修改菜单
    // this.menuUpdate()
    // window.console.log('wwwwwwwwwwwwww',this.$route.name,this.menuList,this.menuIndex)

  },
  updated() {
    
  },
  methods: {
    toggleCollapsed () {
      this.collapsed = !this.collapsed
    },
    // 通过监听路由显示左侧菜单
    filterParent() {
      this.menuList =
      menuList.filter(item => {
        let bbb;
        if(item.children) {
          bbb = item.children.find(data =>  data.name === this.$route.name)
        }
        if(bbb) {
          // filter返回name为bbb的整个数组对象
          return item.children.includes(bbb)  //true
        }
      })[0].children;
    },
    // 动态修改菜单方案改成通过监听路由切换菜单
    // menuUpdate() {
    //   Bus.$on('mainMenu', title => {
    //     let menuChildren = menuList.find(item => item.title == title)
    //     this.parentMenuList = menuChildren
    //     // window.window.console.log('www222',menuChildren.children )
    //     this.menuList = menuChildren.children
    //     // 每次切换主菜单都保持选中第一个子菜单
    //     this.menuIndex = 0
    //   })
    // },
    selMenu(title, index, name) {
      // 点击高亮和路由判断高亮左侧菜单栏重复，但不影响使用
      // window.console.log(999999)
      // this.menuIndex = index
      // let arr = [this.parentMenuList.title, this.parentMenuList.children[index].title];
      // window.window.console.log(name)
      this.$router.push({name})
      // this.$emit('breadSend', arr)
    },
  },
}
</script>
<style lang="less" scoped>

.slider-menu {
  color: #fff;
  background: #1E2036;
  &-self {
    height: 45px;
    padding-left: 20px;
    box-sizing: border-box; 
    text-align: left;
    line-height: 45px;
    font-size: 14px;
    border-left: 5px solid #1E2036;
    span {
      padding-left: 6px;
    }
  }
  // .active:hover {
  //   background: #3D415A;
  //   border-left: 3px solid #358CF0;
  // }
  .active {
    background: #3D415A;
    border-left: 5px solid #358CF0;
  }
}

</style>